<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Event Description Test page</title>
        <link media="all" href="css/styles.css" rel="stylesheet" type="text/css"/>
        <script src="js/jquery.js"></script>       
        <script>
            $(document).ready(ready);
            var urlstr="http://localhost:8080/CRUD-EA-wweb/resources/Trailer" ;
        
            /**
             * Called when the browser DOM is ready
             */
            function ready(){
                $("#bget").click(getData); //registers the click event for sendButton
                $("#bput").click(putData); //registers the click event for sendButton
                $("#bpost").click(postData); //registers the click event for sendButton
                $("#bdelete").click(deleteData); //registers the click event for sendButton
            }
            
             /**
             * Sends a GET request to REST webs service to the get the event description for each supplied 
             * document id.
             */
            function getData(){
                                                                                
                $.ajax({
                    url: $("#url").val() ,
                    type: "GET",
                    //data: JSON.stringify($("#json").val()), 
                    success: postSucess ,  
                    dataType: "json",
                    contentType: 'application/json; charset=UTF-8'
                });                
            }
            
            /**
             * Sends a PUT request to REST webs service to the get the event description for each supplied 
             * document id.
             */
            function putData(){
                var urlS=$("#url").val();
                var jsonS = $("#json").val();
                alert( urlS +"  , "+ jsonS);                                                          
                $.ajax({
                    url: urlS ,
                    type: "PUT",
                    data: jsonS, 
                    success: postSucess ,  
                    dataType: "json",
                    contentType: 'application/json; charset=UTF-8'
                });                
            }

            /**
             * Sends a POST request to REST webs service to the get the event description for each supplied 
             * document id.nada nojo
             */
            function postData(){
                var requests = {id: $("#id").val()};
                var urlS=$("#url").val();
                var jsonS = $("#json").val();
                alert( urlS +"   "+ jsonS);                                                                   
                $.ajax({
                    url: urlS ,
                    type: "POST",
                    data: jsonS, 
                    success: postSucess ,  
                    dataType: "json",
                    contentType: 'application/json; charset=UTF-8'
                });                
            }
            
            
            /**
             * Sends a DELETE request to REST webs service to the get the event description for each supplied 
             * document id.
             */
            function deleteData(){ 
                var urlS=$("#url").val();
                var jsonS = $("#json").val();
                alert( urlS +"   "+ jsonS);          
                $.ajax({
                    url: urlS ,
                    type: "delete",
                    data: jsonS, 
                    success: postSucess ,  
                    dataType: "json",
                    contentType: 'application/json; charset=UTF-8'
                });                
            }
            
            /**
             * Receives the POST result from the REST Web Service
             * and displays the received data on the web page
             */            
            function postSucess(data, textStatus, jqXHR){
                $("#results").empty();
                
                var nrResults = parseInt($("#nrResults").val() );
                var resToShow=data.length;
                
                if(nrResults<data.length){
                    resToShow = nrResults;
                }
                
                for(var idx=0;idx<resToShow;idx++){
                    var r = data[idx];
                    $("#results").append("<p>"+ r._id + ": " + r.description  +"</p>");
                }                
            }
            
        </script>
    </head>
    <body>
        <h1 class="title">Event Description Test page</h1>
        
        <div class="fields">
            
            <div> <div class="label" >URL:</div><br> 
            <input class="field" style="width:400px;" value="http://localhost:8080/CRUD-EA-web/resources/Mobile" id="url"/></div>
            <br>
            <div> <div class="label" >JSON:</div> <textarea rows="6" id="json" cols="50"></textarea></div>                   
            <div class="button"><input type="button" id="bget" value="Get"></div>
            <div class="button"><input type="button" id="bpost" value="Post"></div>
            <div class="button"><input type="button" id="bdelete" value="Delete"></div>
            <div class="button"><input type="button" id="bput" value="Put"></div>
        </div>  
        <p class="titleResults">Resultado</p>
        <div class="results" id="results">            
        </div>
    </body>
</html>
